<template>
  <div @click="clickHandle" :class="[styles.cell, border && styles.border]">
    <div :class="styles.cellLeft">
      <slot :class="styles.cellLeftIcon" name="leftIcon"></slot>
      <span>{{ title }}</span>
    </div>
    <div :class="styles.cellRight">
      <slot name="rightSlot"></slot>
      <span :class="styles.cellRightText">{{ rightText }}</span>
      <i :class="styles.rightArrow" class="iconfont icon-jiantou-right"></i>
    </div>
  </div>
</template>
<script>
import styles from './index.module.less';

export default {
  emits: ['click'],
  props: {
    title: String,
    rightText: String,
    border: Boolean,
  },

  setup(_props, { emit }) {
    const clickHandle = () => emit('click');
    return {
      styles,
      clickHandle,
    };
  },
};
</script>
